<template>
  <div class="player">
       <van-icon  class="back" name="arrow-left" @click="goBack" />
    <div class="song-info">
      <span>{{ name }}</span>
    </div>
    <div class="comment">
      <span><h3>热门评论</h3></span>
      <ul>
        <li v-for="item in commentUrl" :key="item.id">
          <div class="comment-wrap">
            <div class="avatarurl">
              <img :src="item.avatarurl" alt="">
              
            </div>
            <div class="hotComment">
             <span>{{ item.nick }} <img :src="item.vipicon" alt="">  
             
             <b><van-icon name="good-job-o" />{{ item.praisenum }}</b></span>
             <span>{{ item.rootcommentcontent }}</span>      
             <van-divider></van-divider>       
            </div>
              
          </div>
          
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
    data(){
      return{
        name:"",
        commentUrl:{},
      }
    },
    created(){
    
        this.getComment()
    },
    methods:{
        getComment(){
            axios.get("/api/comment",
                {
                params:{
                  id:this.$route.params.id,
                  biztype:1
                }
            })
            .then(res => {
                console.log(res.data.data)
                this.commentUrl=res.data.data.hotComment.commentlist
                this.name=res.data.data.name
            })
            .catch(err => {
                console.error(err); 
            })
        },
        goBack() {//返回上一页面
          this.$router.go(-1);
        },
        
    }
}
</script>

<style scoped>

.back{
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 999;
  font-size: 40px;
}
.player span{
  display: block;
}
.song-info>span:nth-of-type(1){
  font-size: 20px;
  font-weight: 500;/**字体加粗 */
  margin-top: 20px;
}

.comment>span{
 text-align: center;
  margin-top: 65px;
}
.comment-wrap{
  margin: 50px 20px;
  
}
.avatarurl>img{  
  float: left;      
  width: 15%;
  border-radius: 30px;/**圆角 */
  clear:both;
}
.hotComment>span:nth-of-type(1){
 
  font-size: 14px;
  margin-top: 10px;
  margin-left: 8px;
  color: grey;
  font-weight: 250;/**字体加粗 */
  
  
}
.hotComment>span:nth-of-type(1)>img{
  width: 7%;
}
.hotComment>span:nth-of-type(1)>b{
  font-weight: 250;/**字体加粗 */
  margin-left: 90px;
  float: right;
}
.hotComment>span:nth-of-type(2){
  
  font-size: 14px;
  margin-bottom: 15px;
  margin-left: 55px;
  color: black;
  font-weight: 500;/**字体加粗 */
  text-align: left;
  background: #faebd7;
  border-radius: 10px;
}
</style>